{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/light_novel.css' %}">
{% endblock %}
{% block content %}
        <div class="novel">
        <div class="novel-header">
            <img src="{% static '/picture/qxszs.jpeg' %}" alt="小说封面" class="novel-cover">
            <div class="novel-meta">
                <h1 class="novel-title">{{ read_novel.title }}</h1>
                <p>作者：<span class="author">{{ read_novel.author }}</span></p>
                <p>浏览量：<span class="view-count">{{ read_novel.score }}</span></p>
            </div>
        </div>
        <div class="chapter-nav">
            <h2>章节导航</h2>
            <ul class="chapter-list">
                <!-- 章节链接，这里仅展示前12个章节作为示例 -->
                <li><a href="#chapter1" class="active">第一章</a></li>
                <li><a href="#chapter2" class="active">第二章</a></li>
                <li><a href="#chapter3" class="active">第三章</a></li>
                <li><a href="#chapter4" class="active">第四章</a></li>
                <li><a href="#chapter5" class="active">第五章</a></li>
                <li><a href="#chapter6" class="active">第六章</a></li>
                <li><a href="#chapter7" class="active">第七章</a></li>
                <li><a href="#chapter8" class="active">第八章</a></li>
                <li><a href="#chapter9" class="active">第九章</a></li>
                <li><a href="#chapter10" class="active">第十章</a></li>
                <li><a href="#chapter11" class="active">第十一章</a></li>
                <li><a href="#chapter12" class="active">第十二章</a></li>
                <!-- 如果有更多章节，它们将自动换行显示 -->
            </ul>
        </div>
        <div id="chapter1" class="novel-content">
            <h2>第一章：引子</h2>
            <p>这里是小说第一章的具体内容...</p>
        </div>
        <!-- 其他章节内容块，每个块都有对应的ID -->
        <div id="chapter2" class="novel-content" style="display:none;">
            <h2>第二章：发展</h2>
            <p>这里是小说第二章的内容...</p>
        </div>
        <div class="comments">
                <h3>评论区</h3>
                <div class="comment-form">
                    <textarea id="formpl" placeholder="写下你的评论..."></textarea>
                    <button class="submit-comment" id="plBtn">提交评论</button>
                </div>
            </div>
        <div class="comment-section">
{#                <div class="comment">#}
{#                    <div class="comment-header">#}
{#                        <span class="user-name">{{ obj.user_id.name }}:</span>#}
{#                        <span class="comment-text">{{ obj.content }}</span>#}
{#                    </div>#}
{#                    <div class="comment-body">#}
{#                        <!-- <p></p> 或者 <p>这个好厉害</p> -->#}
{#                    </div>#}
{#                </div>#}
{#                <div class="reply user-c">#}
{#                            <div class="reply-text">#}
{#                                <div class="reply-header">#}
{#                                    <span class="user-name">{{ li.0 }}:{{ li.1 }}：</span>#}
{#                                </div>#}
{#                                <div class="reply-body">#}
{#                                    <p>{{ li.2 }}</p>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
            </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="{% static '/js/light_novel_yl.js' %}"></script>
{% endblock %}